<template>
  <div>
    <el-input
      v-model="filterText"
      placeholder="输入关键字进行过滤"/>
    <!-- el-tree提供了一个事件
            可以分析遍历的数据集合的每一个数据是否包含指定的值，如果包含 则保留数据 不包含排除
       -->
    <el-tree
      ref="tree"
      :data="subjects"
      :props="defaultProps"
      :filter-node-method="filterNode"
      default-expand-all
    />

  </div>
</template>
<script>
import subjectApi from '@/api/subject'
export default {
  data() {
    return {
      filterText: '', // 接受 筛选的字符串
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      // [] 代表一个数组，数组中的元素可以是任意的类型  之间通过,分割
      // {} 代表一个json对象 ， k:v 代表json的一个属性  之间通过,分割
      subjects: []
    }
  },
  watch: { // 监听方法：可以监听vue的属性值的改变
    filterText(val) { // 当data中的filterText的值改变时 此方法会被调用
      this.$refs.tree.filter(val) // 调用el-tree的 过滤方法，并传入 监听到的过滤字符串
      // 过滤方法调用时  el-tree就自动遍历所有的节点 调用filterNode方法
    }
  },
  created() {
    this.getSubjects()
  },
  methods: {
    // filterNode ：筛选el-tree中数据的方法
    // 参数1：代表传入的值(过滤字符串)  data代表遍历时生成一个节点的 数据json对象
    filterNode(value, data) {
      if (!value) return true // 如果没有过滤条件，每个节点数据都需要显示
      return data.title.toUpperCase().indexOf(value.toUpperCase()) !== -1 // 如果有过滤条件  使用正在遍历的json对象的 title属性值 进行字符串(过滤字符串)查找
    },
    getSubjects() {
      subjectApi.getSubjectsNestedList().then(r => {
        this.subjects = r.data.items
        console.log(this.subjects)
      })
    }
  }
}
</script>
